<template>
  <div>
    <!-- 通知公告 -->
    <div class="adv">
      <el-card class="box-card">
        <h1>通知公告：</h1>
        <div class="scroll_icon">
          <div class="icon">
            <img src="../../assets/images/gg.png" alt="">
          </div>
          <div class="adv_scroll">
            <el-carousel height="40px" direction="vertical" :autoplay="true">
              <el-carousel-item v-for="item in list.filter(val=>val.company)" :key="item.id">
                <h3 class="medium">恭贺&nbsp;&nbsp;&nbsp;{{ item.company }}&nbsp;&nbsp;&nbsp;上线</h3>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 操作频次 -->
    <div class="handle_pc">
      <el-card class="box-card">
        <h1>操作频次：</h1>
        <div class="handle_msg">
          <el-radio-group v-model="tabPosition">
            <el-radio-button label="day">日</el-radio-button>
            <el-radio-button label="money">月</el-radio-button>
            <el-radio-button label="year">年</el-radio-button>
          </el-radio-group>
          <div class="message">
            <div v-for="item in handleHz">
              <p class="number">{{ item.count }}</p>
              <p class="title">{{ item.type }}</p>
            </div>

          </div>
        </div>
      </el-card>

    </div>
    <!-- 系统由来 -->
    <div class="system_form">
      <el-card class="box-card">
        <h1>系统由来：</h1>
        <div class="form_message">
          <p>
            <span>《巴菲特之道》</span>著作中提到：巴菲特在2014年的净资产是582亿美元，而从1965年到2014年，在这50年间，巴菲特的年华收益率是21.97%。如此低的年收益率，通过日积月累，也可以获得如此巨大的财富。
          </p>
          <p>
            当系统创始人阅读到此时，感到深深的启发，感悟到“<span>循序渐进</span>”和“<span>聚沙成塔</span>”的美妙。于是，精心打造了一套“巴菲刀神”组刀系统，为金属加工解决组刀耗时、成材率低的困惑。
          </p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { notificationApi, handlerHzApi } from '@/api/index.js'
export default {
  data () {
    return {
      tabPosition: 'day',
      timeB: '2024-11-18',
      timeE: "2024-11-18",
      handleHz: [],
      list: []
    }
  },
  created () {
    this.getNotification()
  },
  methods: {
    //获取通知公告
    async getNotification () {
      let res = await notificationApi()
      if (res.code == 200) {
        this.list = res.data
      }
    },
    //获取频次
    async getHandlerHz () {
      let res = await handlerHzApi({
        timeB: this.timeB,
        timeE: this.timeE
      })
      if (res.code == 200) {
        this.handleHz = res.data
      }
    },
    // 获取当月第一天
    getFirstDayOfMonth () {
      const today = new Date();
      const firstDat = new Date(today.getFullYear(), today.getMonth(), 1);
      return firstDat
    },

    // 获取当月最后一天
    getLastDayOfMonth () {
      const today = new Date();
      const nextMonth = today.getMonth() + 1;
      const lastDay = new Date(today.getFullYear(), nextMonth, 0);
      return lastDay
    },
    formatDate (date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    }


  },
  watch: {
    tabPosition: {
      handler (val) {
        if (val == 'day') {
          const today = new Date();
          const currentDate = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
          this.timeB = currentDate + ' 00:00:00'
          this.timeE = currentDate + ' 23:59:59'
        } else if (val == 'money') {
          const firstDay = this.getFirstDayOfMonth();
          const lastDay = this.getLastDayOfMonth();
          this.timeB = this.formatDate(firstDay) + ' 00:00:00'
          this.timeE = this.formatDate(lastDay) + ' 23:59:59'
        } else if (val == 'year') {
          // 获取当前年份
          const currentYear = new Date().getFullYear();
          // 获取当年第一天日期
          const firstDayOfYear = new Date(currentYear, 0, 1);
          // 获取当年最后一天日期
          const lastDayOfYear = new Date(currentYear, 11, 31);

          // 如果需要格式化为YYYY-MM-DD字符串
          const firstDayString = this.formatDate(firstDayOfYear);
          const lastDayString = this.formatDate(lastDayOfYear);



          this.timeB = firstDayString + ' 00:00:00'
          this.timeE = lastDayString + ' 23:59:59'
        }
        this.getHandlerHz()
      },
      immediate: true,
    },
  }
}
</script>

<style lang="scss" scoped>
div {
  h1 {
    font-size: 40px;
    font-weight: bold;
  }

  div.adv {
    div.scroll_icon {
      margin: 10px 0;
      display: flex;
      align-items: center;
      width: 100%;
      padding: 5px;
      border-radius: 5px;

      div.icon {
        width: 40px;
        margin-top: 8px;

        img {
          width: 100%;
        }
      }

      div.adv_scroll {
        width: 90%;
        margin-left: 10px;
        font-size: 28px;
      }
    }
  }

  div.handle_pc {
    margin-top: 10px;

    div.handle_msg {
      margin: 10px 0;

      div.message {
        width: 100%;
        display: flex;
        text-align: center;
        justify-content: center;
        margin: 20px 0;

        div {
          p.number {
            font-size: 40px;
            font-weight: bold;
            color: rgba(34, 189, 168, 1);
          }
          p.title{
            font-size: 32px;
          }
        }

        div:nth-child(2) {
          margin: 0 20%;
        }
      }
    }
  }

  div.system_form {
    margin-top: 10px;

    div.form_message {
      margin-top: 10px;

      p {
        text-indent: 32px;
        line-height: 1.4;
        font-size: 30px;

        span {
          color: #ff0000;
        }
      }
    }
  }
}
</style>
